<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初始化&局部滚动&dialog</title>
    <script src="js/tv-focusable.js"></script>
    <style>
        .on-focus {
            transform: scale(1.1);
            border: 2px solid red;
            box-shadow: 0 0 20px red;
        }

        .demo {
            width: 249px;
            height: 300px;
            margin: 50px auto;
            overflow: hidden;
            border: 1px solid #000;
        }

        .item {
            display: inline-block;
            width: 100px;
            height: 100px;
            margin: 10px;
            text-align: center;
            line-height: 100px;
            background-color: bisque;
            box-sizing: border-box;
            vertical-align: top;
        }

        .style {
            position: fixed;
            background: rgba(0, 0, 0, 0.5);
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            display: none;
        }

        .close {
            cursor: pointer;
            display: block;
            width: 150px;
            line-height: 40px;
            padding: 0 20px;
            margin: 20px auto;
            border: 0;
            background: gray;
        }

        #dialog {
            position: fixed;
            background: rgba(0, 0, 0, 0.5);
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            display: none;
        }
    </style>
</head>

<body>
    <div class="demo">
        <div class="item" focusable>1</div>
        <div class="item" focusable>2</div>
        <div class="item" focusable>3</div>
        <div class="item" focusable>4</div>
        <div class="item" focusable>5</div>
        <div class="item" focusable>6</div>
        <div class="item" focusable>7</div>
        <div class="item" focusable>8</div>
        <div class="item" focusable>9</div>
        <div class="item" focusable>10</div>
        <div class="item" focusable>11</div>
    </div>
    <div class="item" id="id2" onclick="showDialog()" focusable style="margin-left: 300px;">showDialog</div>

    <div id="dialog">
        <div class="demo demo2" style="background-color: rgb(120, 194, 216);width: 400px;">
            <span class="close" focusable onClick="closes()">click close dialog</span>
            <span class="item" focusable>1</span>
            <span class="item" focusable>2</span>
            <span class="item" focusable>3</span>
            <span class="item" focusable>4</span>
            <span class="item" focusable>1</span>
            <span class="item" focusable>2</span>
            <span class="item" focusable>3</span>
            <span class="item" focusable>4</span>
        </div>
    </div>

</body>

</html>
<script>
    // 初始化配置
    tvCore.init({
        focusClassName: "on-focus", // 聚焦元素的className （默认focus）
        KEYS: { KEY_LEFT: [37, 21], KEY_UP: [38, 19], KEY_RIGHT: [39, 22], KEY_DOWN: [40, 20] }, // 自定义键值
        initDis: 20, // 直线类型找焦点时，按键方向的交叉轴方向允许的最大找焦点范围,（默认20px）
        findFocusType: 1, //找焦点方式 0：直线上 1：最近（默认1）
        offsetDistance: 50, // 到边缘的距离
        longPressTime: 800, // 长按响应时间（单位：毫秒），默认500ms
        distanceToCenter: false // 是焦点始终在可是范围的中间部分， 默认false
    });

    // 设置局部滚动
    tvCore.setScrollEl(tvCore.getElementByPath('//div[@class="demo"]'))

    // dialog 操作
    var oldFocusEl = null;
    function showDialog() {
        document.getElementById('dialog').style.display = 'block';
        oldFocusEl = document.querySelector(`.${tvCore.focusClassName}`); // 记录当前焦点
        tvCore.limitingEl = document.querySelector(".demo2"); // 只允许.demo2里面的focusable可以获取焦点
        tvCore.scrollEl = tvCore.getElementByPath('//div[@class="demo demo2"]');
        tvCore.requestFocus(
            tvCore.getElementByPath('//div[@class="demo demo2"]/span[3]')
        );
    }

    function closes() {
        document.getElementById('dialog').style.display = 'none'
        tvCore.scrollEl = tvCore.getElementByPath('//div[@class="demo"]'); // 还原局部滚动元素
        if (oldFocusEl) { tvCore.requestFocus(oldFocusEl) } // 还原打开 dialog 前的焦点状态
        tvCore.limitingEl = null; // 清除焦点约束
    }
</script>